import React, { useMemo, useState } from "react";
import EditPage, { createFields } from "../../Component/ResourceList/Edit";
import { LibAppView } from '@/lib';
import lodash from 'lodash';
import { FormattedMessage, useIntl } from "react-intl";
import moment from 'moment';
import dayjs from 'dayjs';
import { Button, Table, Tag, App } from "antd";
import SearchDialog from "../../Component/SearchDialog";

const SelectArticleFormItem =  LibAppView.withService({
    reqEndPoints: [{
        endPoint: "article.config",
        name: "config"
    }],
})(({ onChange, value, ...props }: any) => {
    const [ open, setOpen ] = useState(false);
    const [ selectedList, setSelectedList ] = useState<any[]>(value || []);
    const app = App.useApp();
    const modal = app.modal;
    const intl = useIntl();
    const categoryList = useMemo(() => {
        const categoryData = (props.responseData as any).config?.data?.category || [];
        return categoryData;
    }, [props.responseData]);
    const artTypeList = useMemo(() => {
        return (props.responseData as any).config?.data?.actType || [];
    }, [props.responseData]);
    const SearchFields: Admin.IAdvancedField[] = useMemo(() =>([
        {
            type: "Select",
            label: "admin.pages.article.category",
            name: "categoryName",
            placeholder: "admin.layout.input.placeholder",
            props: { autoComplete: "off" },
            data: [{
                label: <FormattedMessage id="admin.pages.article.allCategory" />,
                value: null
            }, ...(categoryList || [])]
        },
        {
            type: "Select",
            label: "admin.pages.article.typeTile",
            name: "artType",
            placeholder: "admin.layout.input.placeholder",
            props: { autoComplete: "off" },
            data: [{
                label: <FormattedMessage id="admin.pages.article.allCategory" />,
                value: null
            }, ...(artTypeList || [])]
        }, {
            type: "Input",
            label: "admin.pages.article.title",
            name: "title",
            placeholder: "admin.layout.input.placeholder",
        }
    ]), [categoryList, artTypeList]);
    const tableColumns = useMemo(() => {
        return  [
        {
            title: <FormattedMessage id="admin.pages.article.title" />,
            dataIndex: "title",
            width: 80,
            fixed: true
        },
        {
            title: <FormattedMessage id="admin.pages.article.category"/>,
            dataIndex: "categoryTitle",
            width: 140,
            fixed: false
        }, {
            title: <FormattedMessage id="admin.pages.article.typeTile"/>,
            dataIndex: "artTitle",
            width: 120,
            fixed: false
        },{
            title: <FormattedMessage id="admin.pages.menus.edit.status"/>,
            dataIndex: "status",
            width: 100,
            render: (status: number) => {
                return (<>
                    { status === 1 && <Tag color="green"><FormattedMessage id="admin.pages.article.edit.status.enable"/></Tag> }
                    { status === 0 && <Tag color="error"><FormattedMessage id="admin.pages.article.edit.status.disable"/></Tag> }
                </>);
            }
        }, {
            title: "操作",
            dataIndex: "id",
            width: 60,
            render: (id: string) => {
                return (<Button type="link" onClick={() => {
                    modal.confirm({
                        title: intl.formatMessage({id:"admin.layout.modal.question"}),
                        content: intl.formatMessage({id:"admin.layout.modal.delete.msg"}),
                        okText: intl.formatMessage({id:"admin.layout.modal.confirm"}),
                        cancelText: intl.formatMessage({id:"admin.layout.modal.cancel"}),
                        onOk: () => {
                            const newListData = selectedList.filter(item => item.id !== id);
                            setSelectedList(selectedList.filter(item => item.id !== id));
                            typeof onChange === "function" && onChange(newListData);
                        }
                    });
                }}>删除</Button>)
            }
        }]
    }, []);
    return (
        <div>
            <Button type="primary" onClick={() => {
                setOpen(true);
            }}>选择</Button>
            <Table dataSource={selectedList} columns={tableColumns} />
            <SearchDialog
                tableColumns={tableColumns}
                endPoint={{
                    endPoint: "article.list",
                }}
                searchFields={ SearchFields ||[]}
                open={open}
                onConfirm={(listData: any[]) => {
                    const idList = listData.map((v) => v.id);
                    setSelectedList(listData);
                    setOpen(false);
                    typeof onChange === "function" && onChange(listData);
                }}
                onCancel={() => setOpen(false)}
            />
        </div>
    );
});

